<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <div class="layui-tab-content">
                <style>
                    .xxpayPopupDiv .center {
                        width: 80%;
                    }
                </style>

                <form class="layui-form center">
                    <div class="layui-form-item">
                        <label class="layui-form-label">二维码名称</label>
                        <div class="layui-input-block">
                            <input type="text" required  lay-verify="required" placeholder="请输入二维码名称" autocomplete="off" class="layui-input ewmname">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">最小金额</label>
                        <div class="layui-input-block">
                            <input type="text" required  lay-verify="required | number" placeholder="请输入最小金额(元)" autocomplete="off" class="layui-input minM">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">最大金额</label>
                        <div class="layui-input-block">
                            <input type="text" required  lay-verify="required | number" placeholder="请输入最大金额(元)" autocomplete="off" class="layui-input maxM">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">支持渠道</label>
                        <div class="layui-input-block">
                            <div class="layui-inline">
                                <input type="checkbox" lay-filter="wxCheckboxFilter" id="wxCheckboxInput" title="&nbsp;微&nbsp;信&nbsp;" />
                            </div>
                            <div class="layui-inline layui-hide" id="wxSelectDiv">
                                <select id="wxSelect">
                                    <option value="0">微信公众号支付</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline"></div>
                        <div class="layui-input-block">
                            <div class="layui-inline">
                                <input type="checkbox" lay-filter="alipayCheckboxFilter" id="alipayCheckboxInput" title="支付宝" />
                            </div>
                            <div class="layui-inline layui-hide" id="alipaySelectDiv">
                                <select id="alipaySelect">
                                    <option value="1" lay-filter="alipayPayType">支付宝当面付H5</option>
                                    <option value="2" lay-filter="alipayPayType">支付宝手机wap</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item ">
                        <div class="layui-input-block">
                            <button type="button" lay-submit lay-filter="save_btn" id="save_btn" class="layui-hide xxpayYesBtn">保存</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['admin','form','view'],function(){
        var form = layui.form
        , $ = layui.$
        , admin = layui.admin
        ,view = layui.view
        , element = layui.element
        , layer = layui.layer ;

        element.render('breadcrumb', 'breadcrumb');//渲染导航信息

        form.on('checkbox(wxCheckboxFilter)', function(data){
            if(data.elem.checked){
                $("#wxSelectDiv").removeClass("layui-hide");
            }else{
                $("#wxSelectDiv").addClass("layui-hide");
            }
        });

        form.on('checkbox(alipayCheckboxFilter)', function(data){
            if(data.elem.checked){
                $("#alipaySelectDiv").removeClass("layui-hide");
            }else{
                $("#alipaySelectDiv").addClass("layui-hide");
            }
        });

        form.on('checkbox()', function(data){
            if(data.elem.checked){
                $(this).prop('checked',true);
            }else{
                $(this).prop('checked',false);
            }
        }); 

        $('#save_btn').click(function(){
            var apId = view.getOpenParams("appId");
            var ewmname = $.trim($('.ewmname').val());
            var minM = $.trim($('.minM').val());
            var maxM = $.trim($('.maxM').val());

            var channels = [];

            var isCheckWx = $('#wxCheckboxInput').prop('checked')  ;
            var isCheckAlipay = $('#alipayCheckboxInput').prop('checked')  ;

            if(isCheckWx){
                // var wxCheckProduct = $('#wxSelect').val();
                channels.push({"channelId":"wxpay_jsapi","productId":"8004"});
            }

            if(isCheckAlipay){
                var payType = $('#alipaySelect').val();
                var channelId = "";
                var productId = "";
                if ("1" == payType) {
                    channelId = "alipay_qr_h5";
                    productId = "8007";
                }else if ("2" == payType) {
                    channelId = "alipay_wap";
                    productId = "8007";
                }else {
                    return layer.alert('请选择至少一项支付渠道！');
                }

                channels.push({"channelId":channelId,"productId":productId});
            }

            admin.req({
                type: 'post',
                url: layui.setter.baseUrl + '/mch_qrcode/add', //模拟接口,
                data: {
                    appId: apId ,
                    channels: JSON.stringify(channels) ,
                    codeName: ewmname,
                    minAmount: minM,
                    maxAmount: maxM
                },
                error: function(err){
                    layer.alert(err);
                },
                success: function(res){
                    if(res.code == '0'){
                        layer.alert(res.msg,{title: '保存成功'},function(index){
                            layer.closeAll(); //关闭所有弹层
                            layui.table.reload('tableReload'); //调用业务弹层外表格重新加载
                        })
                    }
                }
            })
        });

        form.render();//手动渲染表单
    })
</script>